<template>
  <div>
    <van-nav-bar title="新增地址" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <van-address-edit
      :area-list="areaList"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      @change-area="change"
      @change-default="check"
    />
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed, ref, createApp } from 'vue'
import { goodsList, goodsNum, goodsDel } from '../../request/goods.js'
import { Toast, Dialog, AddressEdit } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import { areaList } from '../../node_modules/@vant/area-data'
const area = require('../area/area.js')
import { detail, address } from '../../request/api.js'
export default {
  setup() {
    const status = reactive({
      value: '',
      show: false,
    })

    const onClickLeft = () => history.back()
    const router = useRouter()
    const route = useRoute()
    const searchResult = ref([])
    const onSave = async (vae) => {
      let obj = {
        provinceName: vae.province,
        cityName: vae.city,
        regionName: vae.county,
        userName: vae.name,
        userPhone: vae.tel,
        detailAddress: vae.addressDetail,
        defaultFlag: status.show == true ? 1 : 0,
      }
      let { data } = await address(obj)
      // console.log(data)
      if (data.resultCode == 200) {
        router.push({ path: '/weizhi' })
      }
    }
    const check = (e) => {
      status.show = e
    }
    const onDelete = () => Toast('delete')
    const change = (val) => {
      let value = val.pop(-1)
      status.value = value
    }
    const arr = []
    const onChangeDetail = (val) => {
      console.log(val)
      let arrvalue = []
      // console.log(status.value.name)
      for (let key in area) {
        if (key == status.value.code) {
          // console.log(area[key])
          for (let k in area[key]) {
            // console.log(area[key][k])
            arrvalue.push({
              name: status.value.name,
              address: area[key][k],
            })
          }
        }
      }
      if (val) {
        searchResult.value = arrvalue
      } else {
        searchResult.value = []
      }
    }
    return {
      ...toRefs(status),
      onClickLeft,
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
      change,
      check,
    }
  },
}
</script>

<style scoped lang="scss"></style>
